<template>
	<div class="container">
		<el-row style="margin-bottom: 15px;">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>小区管理</el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-row>
			<el-form inline :model="formInline" style="height: 60px;">

				<el-form-item label="小区名称">
					<el-input v-model="formInline.communityName" clearable @clear='queryInfo'></el-input>
				</el-form-item>

				<el-form-item label="创建时间">
					<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear='queryInfo'>
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="queryInfo">查询</el-button>
				</el-form-item>

			</el-form>

		</el-row>

		<el-row style="margin-bottom:10px;">
			<el-button type="primary" size="medium" @click="addCommunity">新增小区</el-button>

			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="小区名称" :label-width="formLabelWidth">
						<el-input v-model="form.communityName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="所属地区" :label-width="formLabelWidth">
						<el-cascader v-model="address" :options="citydata" :props="{ expandTrigger: 'hover' }">
						</el-cascader>
					</el-form-item>
					<el-form-item label="" :label-width="formLabelWidth">
						<el-input v-model="form.communityAddress" autocomplete="off" placeholder="请填写详细地址"></el-input>
					</el-form-item>
					<el-form-item label="小区位置" :label-width="formLabelWidth">
						<el-button @click="sendAddress">获取位置</el-button>
						<span v-show="form.communityLatitude">{{form.communityLatitude}},{{form.communityLongitude}}
						</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancle">取 消</el-button>
					<el-button type="primary" @click="addOrUpdate()">确 定</el-button>
				</div>
			</el-dialog>

		</el-row>

		<el-row>
			<el-table border :data='list' style="width: 100%;margin-bottom: 20px;" :header-cell-style='headerCellStyle'>
				<el-table-column prop="communityId" label="ID"></el-table-column>
				<el-table-column prop="communityName" label="名称"></el-table-column>
				<el-table-column prop="communityAddress" label="位置"></el-table-column>
				<el-table-column prop="communityUserCount" label="用户数量"></el-table-column>
				<el-table-column prop="communityShopCount" label="关联门店"></el-table-column>
				<el-table-column prop="createTime" label="创建时间"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" :underline='false'
							@click="openStoresList(scope.row)">查看关联门店</el-link><br />
						<el-link type="primary" :underline='false'
							@click="editCommunity(scope.row)">编辑小区</el-link><br />
						<el-link type="primary" :underline='false' @click="delCommunity(scope.row)">删除</el-link>
					</template>


				</el-table-column>
			</el-table>
			<!-- 关联门店 -->

			<el-dialog title="收货地址" :visible.sync="dialogTable">

				<el-form :inline="true" :model="StoreListPage" class="demo-form-inline">
					<el-form-item label="">
						<el-input v-model="StoreListPage.shopName"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button @click="onSubmit">搜索</el-button>
					</el-form-item>

					<el-form-item>
						<el-button @click="openStoresList2">添加门店</el-button>
					</el-form-item>
				</el-form>

				<el-table border :data="StoresList" :header-cell-style='headerCellStyle'>
					<el-table-column type="index" width="50" label="序号"></el-table-column>
					<el-table-column prop="shopName" label="名称"></el-table-column>
					<el-table-column prop="shopId" label="ID"></el-table-column>
					<el-table-column prop="shopAddress" label="地址"></el-table-column>
					<el-table-column prop="shopOrderCount" label="订单数量"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-link type="primary" :underline='false'
								@click="associatedStoresRemove(scope.row)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="storesSizeChange" @current-change="storesCurrentChange"
					:current-page="StoreListPage.pageNum" :page-sizes="[5, 10, 15, 20]"
					:page-size="StoreListPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="storeTotal">
				</el-pagination>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancel2()">取 消</el-button>

				</div>
			</el-dialog>

			<!-- 添加门店 -->
			<el-dialog title="添加关联门店" :visible.sync="dialogTable2">

				<el-form :inline="true" :model="StoreListPage" class="demo-form-inline">
					<el-form-item label="">
						<el-input v-model="StoreListPage2.shopName"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button @click="onSubmit2">搜索</el-button>
					</el-form-item>


				</el-form>

				<el-table border :data="StoresList2" :header-cell-style='headerCellStyle'
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="shopName" label="名称"></el-table-column>
					<el-table-column prop="shopId" label="ID"></el-table-column>
					<el-table-column prop="shopAddress" label="地址"></el-table-column>
					<el-table-column prop="shopOrderCount" label="订单数量"></el-table-column>

				</el-table>
				<el-pagination @size-change="storesSizeChange2" @current-change="storesCurrentChange2"
					:current-page="StoreListPage2.pageNum" :page-sizes="[5, 10, 15, 20]"
					:page-size="StoreListPage2.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="storeTotal2">
				</el-pagination>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancel2()">取 消</el-button>
					<el-button type="primary" @click="addAssociated">保 存</el-button>
				</div>
			</el-dialog>


		</el-row>
		<el-row>

			<el-pagination :current-page="formInline.pageNum" :page-sizes="[5, 10, 15, 20]"
				:page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>

		</el-row>


	</div>
</template>

<script>
	import citydata from '@/assets/citydata.js'
	export default {
		data() {
			return {
				associatedStores: {
					panghuShopId: 0,
					panghuCommunityId: 0
				},


				addAssociatedStores: {
					fendeShopCommunityList: [],
					panghuCommunityId: 0
				},

				checked: [],


				StoreListPage: {
					pageNum: 1,
					pageSize: 5,
					shopName: '',
					communityId: ''
				},
				StoreListPage2: {
					pageNum: 1,
					pageSize: 5,
					shopName: '',
					communityId: ''
				},
				StoresList: [],
				StoresList2: [],
				dialogTable: false,
				dialogTable2: false,
				storeTotal: 10,
				storeTotal2: 10,



				dialogFormVisible: false,
				title: '新增小区',
				address: [],
				resMessage: '添加',
				formLabelWidth: '120px',
				citydata: citydata,
				formInline: {
					name: '',
					startTime: '', // 开始时间
					endTime: '', // 结束时间
					pageNum: 1, // 页码
					pageSize: 5, // 每页展示条数
					communityName: '', // 小区名称
				},
				dialogFormVisible: false,
				total: 10,
				list: [],
				date: '',
				headerCellStyle: {
					'text-align': 'center',
					'line-height': '30px',
					backgroundColor: '#409EFF',
					color: '#fff'
				},
				form: {
					addOrUpdateFlag: 1,
					communityAddress: '',
					communityAreaCode: "",
					communityCity: '',
					communityCoordinates: "",
					communityDistrict: '',
					communityId: "",
					communityLatitude: "",
					communityLongitude: "",
					communityName: "",
					communityProvince: '',
				},

			}
		},
		methods: {
			associatedStoresRemove(val) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {


					this.associatedStores.panghuShopId = val.shopId
					this.$http.post('/associatedStores/associatedStoresRemove', {
							panghuCommunityId: this.associatedStores.panghuCommunityId,
							panghuShopId: this.associatedStores.panghuShopId
						})
						.then(res => {
							if (res.status == 200) {
								this.$message.success('删除成功')
								this.associated()
							} else {
								this.$message.error('删除失败')
							}
						})
						.catch(() => {
							this.$message.error('服务器异常')
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			cancel2() {
				this.dialogTable = false
				this.dialogTable2 = false
				this.addAssociatedStores.fendeShopCommunityList = []
				this.checked = []
				this.StoreListPage.pageNum = 1
				this.StoreListPage.pageSize = 5
				this.StoreListPage.shopName = ''
				this.StoreListPage2.pageNum = 1
				this.StoreListPage2.pageSize = 5
				this.StoreListPage2.shopName = ''
				this.StoresList = []
				this.StoresList2 = []
				this.storeTotal = 10
				this.storeTotal2 = 10


			},


			handleSelectionChange(val) {
				this.checked = val
			},


			addAssociated() {
				let fendeShopCommunityList = []
				this.checked.findIndex((item, index) => {
					fendeShopCommunityList.push(index)
				})

				this.$http.post('/associatedStores/addAssociatedStores', {
						fendeShopCommunityList: fendeShopCommunityList,
						panghuCommunityId: this.addAssociatedStores.panghuCommunityId
					})
					.then(res => {
						if (res.status == 200) {
							this.$message.success('添加成功')
							this.queryInfo()
							this.cancel2()

							this.dialogTable2 = false

						} else {
							this.$message.error('添加失败')
						}
					})
					.catch(() => {
						this.$message.error('服务器异常')
					})
			},



			onSubmit() {
				this.associated()
			},
			onSubmit2() {
				this.associated2()
			},

			openStoresList(row) {
				this.storeTotal = row.communityShopCount

				this.StoreListPage.communityId = row.communityId
				this.StoreListPage2.communityId = row.communityId
				this.associatedStores.panghuCommunityId = row.communityId
				this.addAssociatedStores.panghuCommunityId = row.communityId
				this.associated()
				this.dialogTable = true

			},
			openStoresList2() {
				this.associated2()
				this.dialogTable = false
				this.dialogTable2 = true

			},
			associated() {
				this.$http.get('/associatedStores/associatedStoresList', {
						params: this.StoreListPage
					})
					.then(res => {
						if (res.status == 200) {
							this.StoresList = res.data.data.list
						} else {
							this.$message.error('服务器异常')
						}
					})
					.catch(() => {
						this.$message.error('服务器异常')
					})
			},
			associated2() {
				this.$http.get('/associatedStores/findShopListByAdd', {
						params: this.StoreListPage2
					})
					.then(res => {
						if (res.status == 200) {

							this.storeTotal2 = res.data.data.total

							this.StoresList2 = res.data.data.list
						} else {
							this.$message.error('服务器异常')
						}
					})
				// .catch(() => {
				// 	this.$message.error('服务器异常')
				// })
			},




			delCommunity(rowDate) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					this.$http.post('/community/communityRemove', {

							communityId: rowDate.communityId
						})
						.then(res => {
							if (res.status == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								})
								this.queryInfo()
							} else {
								this.$message({
									type: 'error',
									message: '删除失败!'
								})
							}
						})
						.catch(() => {
							this.$message({
								type: 'error',
								message: '服务器异常!'
							})
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			editCommunity(rowDate) {
				this.title = '新增小区'
				this.form = rowDate
				this.address = [this.form.communityProvince, this.form.communityCity, this.form.communityDistrict]
				this.resMessage = '修改'
				this.form.addOrUpdateFlag = 2
				this.dialogFormVisible = true



			},

			cancle() {
				this.dialogFormVisible = false
				this.address = [];
				this.form = {
					addOrUpdateFlag: 1,
					communityAddress: '',
					communityAreaCode: "",
					communityCity: '',
					communityCoordinates: "",
					communityDistrict: '',
					communityId: "",
					communityLatitude: "",
					communityLongitude: "",
					communityName: "",
					communityProvince: '',
				}
			},
			addCommunity() {
				this.dialogFormVisible = true
				this.title = '新增小区'
				this.resMessage = '添加'
				this.form.addOrUpdateFlag = 1
			},
			handleSizeChange(val) {
				this.formInline.pageSize = val
				this.formInline.pageNum = 1
				this.queryInfo()
			},
			handleCurrentChange(val) {
				this.formInline.pageNum = val
				this.queryInfo()
			},
			storesSizeChange(val) {
				this.StoreListPage.pageSize = val
				this.StoreListPage.pageNum = 1
				this.associated()
			},
			storesCurrentChange(val) {
				this.StoreListPage.pageNum = val
				this.associated()
			},
			storesSizeChange2(val) {
				this.StoreListPage2.pageSize = val
				this.StoreListPage2.pageNum = 1
				this.associated2()
			},
			storesCurrentChange2(val) {
				this.StoreListPage2.pageNum = val
				this.associated2()
			},


			queryInfo() {
				this.$http.get('/community/communityList', {
						params: this.formInline
					})
					.then(res => {
						if (res.status == 200) {
							this.list = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message({
								type: 'error',
								showClose: 'true',
								message: '服务器请求失败！'
							})
						}
					})
					.catch(() => {
						this.$message({
							type: 'error',
							showClose: 'true',
							message: '服务器异常！'
						})
					})
			},
			sendAddress() {

				if (this.address.length == 0) {
					this.$message({
						type: 'error',
						showClose: 'true',
						message: '请选择地区'
					})
				} else if (!this.form.communityAddress) {
					this.$message({
						type: 'error',
						showClose: 'true',
						message: '请填写详细地址'
					})
				} else {
					let advalue = this.form.communityProvince + this.form.communityCity + this.form.communityDistrict +
						this.form.communityAddress
					this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
							params: {
								key: '457886b5972a97e93fb9cdccebfd450f',
								'address': advalue
							}
						}).then(res => {
							if (res.status == 200) {
								let location = res.data.geocodes[0].location.split(',')
								this.form.communityLatitude = location[0]
								this.form.communityLongitude = location[1]
							}

						})
						.catch(() => {
							this.$message({
								type: 'error',
								showClose: 'true',
								message: '服务器异常'
							})
						})
				}
			},
			addOrUpdate() {

				this.$http.post('/community/communityUpdate', this.form)
					.then(res => {
						if (res.status == 200) {
							this.$message({
								type: 'success',
								showClose: true,
								message: this.resMessage + '成功'
							})
							this.queryInfo()
							this.cancle()
						} else {
							this.$message({
								type: 'error',
								showClose: true,
								message: this.resMessage + '失败'
							})
						}
					})
					.catch(() => {
						this.$message({
							type: 'error',
							showClose: true,
							message: '服务器异常'
						})
					})
			}
		},
		mounted() {
			this.queryInfo()
		},
		watch: {
			date(newDate) {
				this.formInline.startTime = newDate[0]
				this.formInline.endTime = newDate[1]
			},
			address() {
				this.form.communityProvince = this.address[0];
				this.form.communityCity = this.address[1];
				this.form.communityDistrict = this.address[2];
			}
		}
	}
</script>

<style scoped>

</style>